<template>
  <div class="all">
    <el-divider content-position="right">党建要闻</el-divider>
    <div class="list">
      <ul>
        <li v-for="item in articleList" :key="item">
          <span><a>{{ item.title }}</a></span>
          <span style="float: right">[{{ item.time }}]</span>
        </li>
      </ul>
    </div>
    <el-divider />
    <div class="pageDiv">
      <a class="shang">上一页</a> <a>1</a> <a>2</a> <a class="active">3</a>
      <a>4</a> <a>5</a> <a>6</a> <a>7</a> <a>8</a> <a>9</a>
      <a class="shang">下一页</a>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      articleList: [
        {
          title: '信仰之光照亮壮阔征程——解码百年来中国共产党坚如磐石的理想信念',
          time: '2020-04-31'
        },
        {
          title: '吹响全面深化改革号角',
          time: '2020-04-21'
        },
        {
          title: '信仰之光照亮壮阔征程——解码百年来中国共产党坚如磐石的理想信念',
          time: '2020-04-31'
        },
        {
          title: '吹响全面深化改革号角',
          time: '2020-04-21'
        },
        {
          title: '信仰之光照亮壮阔征程——解码百年来中国共产党坚如磐石的理想信念',
          time: '2020-04-31'
        },
        {
          title: '吹响全面深化改革号角',
          time: '2020-04-21'
        },
        {
          title: '信仰之光照亮壮阔征程——解码百年来中国共产党坚如磐石的理想信念',
          time: '2020-04-31'
        },
        {
          title: '吹响全面深化改革号角',
          time: '2020-04-21'
        },
        {
          title: '信仰之光照亮壮阔征程——解码百年来中国共产党坚如磐石的理想信念',
          time: '2020-04-31'
        },
        {
          title: '吹响全面深化改革号角',
          time: '2020-04-21'
        },
        {
          title: '信仰之光照亮壮阔征程——解码百年来中国共产党坚如磐石的理想信念',
          time: '2020-04-31'
        },
        {
          title: '吹响全面深化改革号角',
          time: '2020-04-21'
        }
      ]
    }
  }
}
</script>
<style scoped>
.all {
  width: 80%;
  margin: 45px auto;
  padding: 45px 15px;
}
.pageDiv {
  margin: 0 auto;
  text-align: center;
}
.list {
  margin: 45px 0;
}
.shang {
  width: 60px !important;
}
.pageDiv a {
  margin-left: 8px;
  margin-top: 45px;
  width: 30px;
  height: 20px;
  line-height: 25px;
  font: 12px/20px "宋体";
  border: 1px solid #e0e1e2;
  display: inline-block;
  text-align: center;
  color: #bc272c;
}
.pagediv a:hover {
  color: #fff;
  background-color: #bc272c;
}
.pageDiv a.active {
  color: #fff;
  background-color: #bc272c;
}

ul li {
  margin: 12px 0;
  font-size: 16px;
  font-family: "微软雅黑";
  letter-spacing: 0.05em;
}
ul >>> li:nth-child(5n + 1) {
  margin-top: 25px;
}
</style>
